import { addDictType, deleteDictType, queryDictTypeList, updateDictType } from "@/services/system/SystemController";
import { ActionType, ModalForm, PageContainer, ProColumns, ProFormDigit, ProFormSwitch, ProFormText, ProFormTextArea, ProTable } from "@ant-design/pro-components";
import DictTypeForm from "./components/dictTypeForm";
import { useRef, useState } from "react";
import { Button, Form, Modal, Typography } from "antd";
import OptionBar from "@/components/OptionBar";
import DictData from "./dictData";
import LoadingWrap from "@/components/LoadingWrap";

const HomePage: React.FC = () => {
    const [data, setData] = useState<System.DictInfo | null | 0>(null);
    const [showDict, setShowDict] = useState<null | System.DictInfo>(null);
    const actionRef = useRef<ActionType>();

    const columns: ProColumns<System.DictInfo>[] = [
        { title: '字典名称', dataIndex: 'dict_name' },
        {
            title: '字典类型', dataIndex: 'dict_type',
            render: (_, record) => <Typography.Link onClick={() => setShowDict(record)}>{record.dict_type}</Typography.Link>
        },
        {
            title: '状态',
            dataIndex: 'status',
            valueType: "select",
            valueEnum: {
                true: { text: '启用', status: 'Success' },
                false: { text: '停用', status: 'Error' },
            },
        },
        {
            title: '创建时间',
            hideInSearch: true,
            valueType: 'dateTime',
            dataIndex: 'created_at',
            width: "20%",
            responsive: ['md'],
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            width: "20%",
            render: (_, record) => <OptionBar onUpdate={() => { setData(record) }} onDelete={async () => { await deleteDictType(record.id); actionRef.current?.reload() }} />,
        },
    ];
    return (<PageContainer header={{ extra: <Button type="primary" onClick={() => setData(0)} key={0} title='新增'>新增</Button> }} breadcrumbRender={false}>
        <ModalForm<System.DictInfo> open={data != null} title={data == 0 ? "添加字典" : "编辑字典"} layout="horizontal" width={450} modalProps={{ destroyOnClose: true, onCancel: () => setData(null) }}
            onFinish={async (formData) => {
                if (data == 0 || data == null) {
                    await addDictType(formData);
                } else {
                    await updateDictType(data.id, formData)
                }
                setData(null)
                actionRef.current?.reload();
            }}>
            {data != null && <DictTypeForm data={data != 0 ? data : undefined}></DictTypeForm>}
        </ModalForm>

        <Modal title={`字典数据 ${showDict?.dict_type}`} open={showDict != null} width={600} onOk={() => setShowDict(null)} onCancel={() => setShowDict(null)}>
            <LoadingWrap loading={showDict == null}><DictData dict_id={showDict?.id || 0} /></LoadingWrap>
        </Modal>
        <ProTable<System.DictInfo>
            search={{ filterType: "light" }}
            options={{ density: false, setting: false }}
            pagination={{ defaultPageSize: 15, showSizeChanger: true, pageSizeOptions: [10, 15, 20, 25, 30, 50] }}
            request={queryDictTypeList}
            actionRef={actionRef}
            columns={columns}
        />
    </PageContainer>)
}

export default HomePage;